<template>
  <div class="breadcrumb-nav">
    <div>
      <a-button type="primary" @click="toggleCollapsed" style="margin-right:20px">
        <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
      </a-button>
      <a-breadcrumb style="display:inline-block">
        <a-breadcrumb-item>
          <router-link to="/home">
            <a-icon type="home" />
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item href>
          <a-icon type="user" />
          <span>{{currentRoute.name}}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="weather-box" style="user-select:none">
      <div v-if="city.name">
        <span>{{city.city}}</span>&nbsp;&nbsp;
        <img :src="WeatherInf.dayPictureUrl" /> &nbsp;&nbsp;
        <span>{{WeatherInf.weather}}</span>&nbsp;&nbsp;
        <span>{{date}}</span>&nbsp;&nbsp;
      </div>
      <div v-else>
        <span>暂无位置信息</span>
      </div>
    </div>
    <div class="userConfig">
      欢迎：
      <span style="font-weight:700">{{user.username}}</span>&nbsp;&nbsp;&nbsp;
      <a-dropdown>
        <a class="ant-dropdown-link" href="#">
          <a-avatar :size="30" style="margin-right:5px" icon="user" />
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">个人中心</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="logout">退出登录</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>
<script>
import { reqWeather, reqCityname, reqFutureWeahter } from "../../api/index";
import storageUtil from "../../utils/storageUtil";
import dateUtils from "../../utils/dateUtils";
import { initAddress } from "../../utils/addressUtil";
export default {
  props: ["currentRoute", "user"],
  data() {
    return {
      WeatherInf: {},
      collapsed: false,
      date: "",
      city: {}
    };
  },
  created() {
    //获取天气
    //获取日期时间
    this.getDate();
    this.getCity();
    
  },
  methods: {
    logout(e) {
      e.preventDefault()
      storageUtil.removeUser()
      this.$router.replace('/login')
    },
    //获取天气
    async getWeather(city) {
      const { dayPictureUrl, weather } = await reqWeather(city);
      this.WeatherInf = { dayPictureUrl, weather };
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      this.$emit("toggleCollapsed");
    },
    //获取日期
    getDate() {
      setInterval(() => {
        const currentTime = dateUtils.formate_Date(Date.now());
        this.date = currentTime;
      }, 1000);
    },
    async getCity() { 
      var coords = storageUtil.getCoords();
      if (coords.latitude === undefined) {
        const coords = await initAddress();
      }
      const city = await reqCityname(coords);
      this.city = city;
     const { dayPictureUrl, weather } = await reqWeather(city.city);
      this.WeatherInf = { dayPictureUrl, weather };
    }
  }
};
</script>
<style lang="stylus" scoped>
.breadcrumb-nav {
  box-sizing: border-box;
  padding: 10px 25px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .weather-box {
    width: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .userConfig {
    float: right;
  }
}
</style>